<!-- 论坛中心 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>论坛中心</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/style.css"/>
    <!-- 主题（主要颜色设置） -->
    <link rel="stylesheet" href="../../css/theme.css"/>
    <!-- 通用的css -->
    <link rel="stylesheet" href="../../css/common.css"/>
</head>
<style>
    /* 新增样式 */
    .message-form {
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        padding: 25px !important;
        max-width: 800px;
        margin: 20px auto !important;
    }

    /* 输入框样式 */
    .layui-textarea {
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        padding: 15px !important;
        min-height: 100px !important;
        box-shadow: none !important;
        color: #333 !important;
        transition: all 0.3s !important;
    }

    .layui-textarea:focus {
        border-color: #7B6CF8 !important;
        box-shadow: 0 0 8px rgba(123, 108, 248, 0.1) !important;
    }

    /* 按钮样式 */
    .btn-submit {
        background: linear-gradient(45deg, #7B6CF8, #9A82F5) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 0 25px !important;
        height: 36px !important;
        box-shadow: 0 4px 12px rgba(123, 108, 248, 0.3) !important;
        transition: transform 0.2s !important;
    }

    .btn-submit:hover {
        transform: translateY(-2px);
    }

    .layui-btn-primary {
        border-color: #ddd !important;
        color: #666 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }

    /* 标签样式 */
    .layui-form-label {
        color: #666 !important;
        font-weight: 500 !important;
        padding-right: 15px !important;
    }

    /* 移动端优化 */
    @media (max-width: 768px) {
        .message-form {
            padding: 15px !important;
            margin: 10px !important;
        }

        .layui-textarea {
            min-height: 80px !important;
        }

        .btn-submit {
            width: 100%;
            margin: 5px 0 !important;
        }
    }
</style>
<body>

<div id="app">
    <form class="layui-form message-form"
          :style='{"padding":"20px","boxShadow":"2px px ","margin":"0 0 20px 0","borderColor":"rgba(100, 104, 105, 1)","backgroundColor":"#fff","borderRadius":"6px","borderWidth":"0","borderStyle":"solid"}'>
        <div class="layui-form-item layui-form-text" style="display: flex;align-items: center;margin:0">
            <label style="width: auto;"
                   :style='{"padding":"0","minWidth":"65px","fontSize":"14px","color":"rgba(13, 10, 10, 1)","textAlign":"left"}'
                   class="layui-form-label">评论</label>
            <div class="layui-input-block" style="margin:0;flex:1;">
                <textarea
                        :style='{"padding":"10px","boxShadow":"0 0 6px rgba(107, 110, 111, 1)","borderColor":"rgba(107, 110, 111, 1)","backgroundColor":"#fff","color":"rgba(140, 67, 86, 1)","borderRadius":"6px","borderWidth":"0","fontSize":"14px","borderStyle":"solid","height":"120px"}'
                        name="content" required lay-verify="required" placeholder="请输入评论"
                        class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button :style='{"padding":"0 10px","boxShadow":"2px 0 6px #70f3ff","margin":"10px 5px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(112, 243, 255, 1)","color":"#fff","borderRadius":"10px","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
                        class="layui-btn btn-submit" lay-submit lay-filter="*">评论
                </button>
                <button :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,.3)","margin":"10px 5px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(238, 101, 101, 0.42)","color":"rgba(133, 125, 125, 1)","borderRadius":"10px","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
                        type="reset" class="layui-btn layui-btn-primary">重置
                </button>
            </div>
        </div>
    </form>

    <!-- <form class="layui-form login-form">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">评论：</label>
            <div class="layui-input-block" style="text-align: left;">
                <textarea name="content" id="content" class="layui-textarea">请输入评论</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: right;margin-right: 30px;">
                <button class="layui-btn btn-submit" lay-submit lay-filter="*">评论</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form> -->
</div>
<!-- layui -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<script src="../../js/vue.js"></script>
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data: {},
        methods: {
            jump(url) {
                jump(url)
            }
        }
    })

    layui.use(['layer', 'element', 'http', 'jquery', 'form'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var http = layui.http;
        var form = layui.form;
        var jquery = layui.jquery;

        var pid = http.getParam('pid');

        form.on('submit(*)', function (data) {
            // 获取富文本的内容
            data = data.field;
            data.username = localStorage.getItem('adminName');
            data.userid = localStorage.getItem('userid');
            data.parentid = pid;
            http.requestJson('forum/add', 'post', data, function (res) {
                layer.msg('发表成功', {
                    time: 2000,
                    icon: 6
                }, function () {
                    window.parent.location.reload();
                });
            });
            return false;
        });

    });
</script>
</body>
</html>
